<template>
  <div>
    <div v-for="(item, index) in carList">
      <van-checkbox v-model="item.flag"></van-checkbox>
      <van-card
        :num="item.count"
        :price="item.price"
        desc="描述信息"
        :title="item.shopdata.name"
        :thumb="item.shopdata.cover"
      >
        <template #tags>
          <van-tag plain type="danger">标签</van-tag>
          <van-tag plain type="danger">标签</van-tag>
        </template>
        <template #footer>
          <van-button @click="subtractNumber(item.id)" size="mini"
            >-</van-button
          >
          <van-button @click="addNumber(item.id)" size="mini">+</van-button>
        </template>
      </van-card>
    </div>
    <van-checkbox
      v-model="allFlag"
      @click="changeAllFlag(allFlag)"
    ></van-checkbox>
    <div>
      {{ sumPrice }}
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {};
  },

  mounted() {
    this.getList();
  },
  computed: {
    ...mapState("car", ["carList"]),
    ...mapGetters("car", ["allFlag", "sumPrice"]),
  },
  methods: {
    ...mapActions("car", ["getCarData"]),
    ...mapMutations("car", ["addNub", "subtractNub", "changeFlag"]),
    getList() {
      console.log(mapState("car", ["carList"]));
      this.getCarData();
    },
    addNumber(id) {
      debugger;
      this.addNub(id);
    },
    subtractNumber(id) {
      this.subtractNub(id);
    },
    changeAllFlag(flag) {
      this.changeFlag(!flag);
    },
  },
};
</script>

<style lang="stylus" scoped></style>
